<form class="form-horizontal article-editor-main-form" name="articleForm" [formGroup]="editForm">
  <div class="form-group row" [ngClass]="controlStateClass(formTitle, null, isSubmited)">
    <label for="article-title" class="col-sm-1 form-control-label text-right">文章标题</label>
    <div class="col-sm-5">
      <input
        autofocus
        type="text"
        title="文章标题" 
        placeholder="文章标题" 
        id="article-title"
        name="article-title"
        class="form-control form-control-lg" 
        [formControl]="formTitle"
        (change)="handleTitleChange($event)"
      />
    </div>
  </div>
  <div class="form-group row" [ngClass]="controlStateClass(formKeywords, 'has-warning', isSubmited)">
    <label for="article-keywords" class="col-sm-1 form-control-label text-right">文章关键词</label>
    <div class="col-sm-5">
      <input
        type="text"
        id="article-keywords"
        name="article-keywords"
        class="form-control form-control-lg" 
        title="多个关键词以 ' , ' 隔开" 
        placeholder="多个关键词以 ' , ' 隔开" 
        [formControl]="formKeywords"
        (change)="handleKeywordsChange($event)"
      />
    </div>
  </div>
  <div class="form-group row" [ngClass]="controlStateClass(formDescription, 'has-warning', isSubmited)">
    <label for="article-description" class="col-sm-1 form-control-label text-right">文章描述</label>
    <div class="col-sm-10">
      <textarea
        class="form-control article-description"
        cols="30" 
        rows="20" 
        name="article-description" 
        id="article-description" 
        title="文章描述"
        placeholder="文章描述"
        [formControl]="formDescription"
        (change)="handleDescriptionChange($event)"
      ></textarea>
    </div>
  </div>
  <div class="form-group row" [ngClass]="{ 'has-success': tag.length && editForm.touched }">
    <label class="col-sm-1 form-control-label text-right">文章标签</label>
    <div class="col-sm-10 col-sm-offset-1">
      <div class="form--control article-tags" title="选择文章标签">
        <div class="tags-list">
          <button class="btn btn-article-tag-item btn-with-icon btn-default text-muted disabled" *ngIf="!tags.length">
            <i class="ion-md-information-circle-outline"></i>
            <span>暂无标签</span>
          </button>
          <button 
            class="btn btn-sm article-tag-item" 
            *ngFor="let tag of tags"
            [ngClass]="tag.selected ? 'btn-primary' : 'btn-default'"
            (click)="tag.selected = !tag.selected;handleTagChange()"
            [title]="tag.description || tag.name"
            [disabled]="fetching[Loading.Tag]"
          >
            <span>{{ tag.name }}</span>
          </button>
        </div>
        <hr>
        <div class="clearfix">
          <button
            class="btn btn-sm btn-default btn-with-icon"
            [disabled]="fetching[Loading.Tag]"
            (click)="getTags()"
          >
            <i class="ion-md-refresh"></i>
            <span>更新标签列表</span>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="form-group row" [ngClass]="controlStateClass(formContent, 'has-error', isSubmited)">
    <label for="articleContent" class="col-sm-1 form-control-label text-right">文章内容</label>
    <div class="col-sm-10">
      <sa-markdown-editor
        class="form-control article-content"
        title="文章内容"
        [formControl]="formContent"
        (change)="handleContentChange($event)"
      >
      </sa-markdown-editor>
    </div>
  </div>
</form>